<template>
    <span>
        <button :disabled="count<=props.min"  @click="countChange(-1)">-</button>
        <input type="text" v-model.number="count" class="box">
        <button @click="countChange(1)" :disabled="count>=props.max">+</button>
    </span>
</template>
<script lang="ts" setup>
// define定义 Props属性  ref引用
// defineEmits 定义发送事件
// withDefaults 设置默认值
// watch 监听
// defineEmits发送事件
import { defineProps,ref,withDefaults,watch,defineEmits} from 'vue';
// 定义porps的接口
interface Iprops{
    max?:number,
    min?:number,
    step?:number,
    value:number,
}
// 定义props（父组件传递过来的参数）ts写法
// ts写法并设置默认值
const props = withDefaults(defineProps<Iprops>(),{
    max:20,
    min:1,
    step:1,
    value:1
})
// 非ts写法
// const props = defineProps({
//     min:{type:Number,default:1}
// })

 
const count = ref<number>(props.value);

// 定义改变count的方法
function countChange(n:number):void{
    count.value += props.step*n;
}
 
 
// 定义change事件发送器
// ts写法
const emit = defineEmits<{(event:"change",data:number):void}>()
// 非ts写法
// const emit = defineEmits(["change"])
// 监听count的变化
watch(count,()=>{
    // 发送事件
    emit("change",count.value)
})
 
</script>
 